<template>
	<div>
		<div class="shopcart">
			<div class="content">
				<div class="content-left">
					<div class="logo-wrapper">
						<div class="logo">
							<i class="icon-shopping_cart"></i>
						</div>
						<div class="num">1</div>
					</div>
					<div class="price">30元</div>
					<div class="desc">另需配送费4元</div>
				</div>
				<div class="content-right">
					<div class="pay">还差几元起送</div>
				</div>
				<div class="ball-container"></div>
			</div>
		</div>
	</div>
</template>

<style lang="stylus" scoped>


// 
	.shopcart
		position: fixed
		left: 0
		bottom: 0
		z-index: 50
		width: 100%
		height: 48px
		background: #000
		.content
			display: flex
			background: #141d27
			// display:inline-block有一个默认间隙的问题 —— 解决：父级font-size:0....看.content
			font-size: 0
			.content-left
				// flex-grow:1
				flex: 1

				// logo-wrapper：图标外包裹 实现第一层的大圆，使用display+vertical-align+position(top负数，向上)，然后设置border-box， content = 56-6*2 = 44,半圆border-radius:50%,最后背景和content的一致
				.logo-wrapper
					display: inline-block
					vertical-align: top
					position: relative
					top: -10px
					box-sizing: border-box//width/height = border + padding + 内容的宽度/高度
					width: 56px
					height: 56px
					padding: 6px
					margin: 0 12px
					border-radius: 50%
					background: #141d27
					//logo：图标容器，实现包裹图标的容器，背景颜色不一样，width,height,border-radius设置好，则实现了内圆，最后加上text-align使得内图标i水平居中，背景
					.logo
						width: 100%
						height: 100%
						border-radius: 50%
						text-align: center
						background: #2b343c
						//icon-shopping_cart 图标, content-width/height: 56-6*2=44px（border-box，6px是padding）,line-height的目的是垂直居中，.content设置了font-size：0，这里要设置font-size，不然无法显示（自行设置大小），最后是图标的颜色
						//iconfont是文字图标，可以设置font-size【图标大小】，color【图标颜色】
						.icon-shopping_cart
							//(56-44)/2=6px
							line-height: 44px
							font-size: 24px
							color: #80858a
				
					// 这个有点难，实现图标（logo-wrapper）右上角的数字（具体点了几样）
					// 容器是方形，相对于logo-wrapper绝对定位（logo-wrapper相对定位）
					// 字体要设置，不然无法显示，文字白色，背景红色（i无语义，可设置背景）
					// 宽度，高度，border-radius，椭圆 , line-height+text-align
					.num
						font-size: 9px
						font-weight: 700
						position: absolute
						top: 0
						right: 0
						width: 24px
						height: 16px
						line-height: 16px
						text-align: center
						border-radius: 16px
						color: #fff
						background-color: rgb(240, 20, 20)
						box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4)
				//字体大小，粗细 + display + vertical-align + margin-top +  border-box + padding-right,最后字体颜色+右border
				.price
					font-size: 16px
					font-weight: 700
					display: inline-block
					vertical-align: top
					margin-top: 12px
					box-sizing: border-box
					line-height: 24px
					padding-right: 12px
					border-right: 1px solid rgba(255, 255, 255, 0.1)
					color: rgba(255, 255, 255, 0.4)
				.desc
					font-size: 10px
					display: inline-block
					vertical-align: top
					margin: 12px 0 0 12px
					line-height: 24px
					color: rgba(255, 255, 255, 0.4) 
			.content-right
				// flex:grow: 0 flex-shrink: 0 flex-basis: 105px
				flex: 0 0 105px
				width: 105px
				.pay
					height: 48px
					line-height: 48px
					text-align: center
					font-size: 12px
					font-weight: 700
					color: rgba(255, 255, 255, 0.4)
					background: #2b333b
</style>
